<template>
  <div class="way-style">
    <a-input :value="props.modelValue" :style="props.inputStyle" placeholder="请选择" disabled />
    <div class="btn">
      <a-button type="primary">选择文件</a-button>
      <input type="file" name="file" class="upload" multiple="true" @change="getFileNameToText" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  const emit = defineEmits(['update:modelValue', 'change']);
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    inputStyle: {
      type: String,
      default: '',
    },
  });
  let wayValue = ref(props.modelValue);
  // 如果父组件传过来的数据是异步获取的，则需要进行监听
  watch(
    () => props.modelValue,
    () => {
      wayValue.value = props.modelValue;
    },
  );
  function getFileNameToText(e) {
    const target = e.target as HTMLInputElement;
    emit('update:modelValue', target.value);
    emit('change', target);
  }
</script>

<style lang="less" scoped>
  .way-style {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .input {
    flex: 1;
  }

  .btn {
    // margin-left: 20px;
    position: relative;
    cursor: pointer;
  }

  .upload {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 88px;
    height: 32px;
  }
</style>
